import React, {Component} from 'react';
import classNames from 'classnames';
import ThemeProvider from 'material-ui/styles/MuiThemeProvider';
import withRouter from 'react-router-dom/withRouter';
import matchPath from 'react-router-dom/matchPath';
import withStyles from 'material-ui/styles/withStyles';
import MuiDialog from 'material-ui/Dialog/Dialog';
import Toolbar from 'material-ui/Toolbar/Toolbar';
import DialogTitle from 'material-ui/Dialog/DialogTitle';
import DialogContent from 'material-ui/Dialog/DialogContent';
import DialogActions from 'material-ui/Dialog/DialogActions';
import Typography from 'material-ui/Typography/Typography';
import Button from './Button';
import IconButton from 'material-ui/IconButton/IconButton';
import Slide from 'material-ui/transitions/Slide';

import wave from 'assets/textrue_wave.png';

import ArrowBack from 'material-ui-icons/ArrowBack';
import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
const DialogTransition = (props) => <Slide direction="up" {...props}/>;

const style = ({breakpoints, palette, spacing: {unit}}) => ({
  button: {
    boxSizing: 'border-box',
    marginTop: unit*2,
    cursor: 'pointer',
    display: 'flex'
  },
  dialog: {
    backgroundColor: '#edf7fb',
    backgroundImage: `url(${wave})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center bottom',
    backgroundSize: 'contain'
  },
  illustrator: {
    position: 'fixed',
    minWidth: 420,
    height: '75vh',
    left: '-20%',
    right: '-20%',
    bottom: '-20%',
    marginLeft: 'auto',
    marginRight: 'auto',
    zIndex: -1
  },
  dialogFullScreen: {
    maxWidth: breakpoints.values.sm,
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  dialogFullWidth: {
    marginLeft: 'auto',
    marginRight: 'auto'
  },
  dialogTitle: {
    backgroundColor: palette.primary[500],
    color: palette.getContrastText(palette.primary[500])
  },
  dialogContent: {
    display: 'flex',
    flexDirection: 'column',
    overflowX: 'hidden',
    touchAction: 'auto',
    '& > img': {
      maxWidth: '100%'
    }
  },
  nopaddingContent: {
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0
  }
});


@withRouter
@withStyles(style)
class Dialog extends Component {
  state = {
    open: false
  };

  match(location = this.props.location.pathname, path = this.props.path) {
    return matchPath(
      location,
      {path}
    );
  }

  componentDidMount() {
    this.setState({open: !!this.match()});
  }

  componentWillReceiveProps(nextProps, nextState) {
    const matched = !!this.match(nextProps.location.pathname);
    if (this.state.open !== matched) {
      this.setState({open: matched});
    }
  }

  handleClose = () => {
    this.match() && (
      this.props.history.action === 'PUSH'
        ? this.props.history.goBack()
        : this.props.history.push('/')
    );
  };

  handleOpen = () => {
    !this.state.open && this.setState({open: true}, () => {
      !this.match() && this.props.history.push(this.props.path);
    });
  }

  render() {
    const {
      path,
      match,
      location,
      history,
      classes,
      title,
      label,
      nopadding = false,
      children,
      onRequestOpen,
      onRequestClose,
      buttonProps,
      staticContext,
      ...others
    } = this.props;

    return ([
      <Button
        key="button"
        raised
        className={classes.button}
        onClick={this.handleOpen}
      >
        {label}
      </Button>,
      <MuiDialog
        key="content"
        classes={{
          fullScreen: classes.dialogFullScreen,
          fullWidth: classes.dialogFullWidth
        }}
        open={this.state.open}
        transition={DialogTransition}
        onRequestClose={this.handleClose}
        {...others}
      >
        <Toolbar classes={{root: classes.dialogTitle}}>
          <IconButton color="inherit" onClick={this.handleClose}>
            <ArrowBack/>
          </IconButton>
          <Typography color="inherit" type="title">
            {title}
          </Typography>
        </Toolbar>

        <DialogContent classes={{
          root: classes.dialog
        }} className={classNames(classes.dialogContent, {[classes.nopaddingContent]: nopadding})}>
          {children}
        </DialogContent>

      </MuiDialog>
    ])

  }
}


export default Dialog